/*
 * Copyright 2018 Red Hat, Inc. and/or its affiliates.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

[data-i18n-prefix="DataTypeListItemView."] {

  &.list-group-item {
    height: 70px;
    background: none;
    border: none;
    padding-left: 25px;
  }

  [data-type-field="arrow-button"] {
    cursor: pointer;
  }

  .data-type-icon {
    border: 2px solid #39a5dc;
    font-size: 1.3em;
    height: 30px;
    line-height: 30px;
    width: 30px;
    border-radius: 50%;
    padding-left: 4px;
    margin-left: 20px;
    position: relative;
  }

  .data-type-icon:before {
    top: -1px;
    color: #adadad;
    position: absolute;
  }

  .fa-caret-right:before,
  .fa-caret-down:before {
    font-size: 1.4em;
    top: 15px;
    position: absolute;
  }

  .list-view-pf-actions button:hover,
  .list-view-pf-actions .dropdown-kebab-pf .btn.btn-link.dropdown-toggle {
    outline: none;
  }

  .list-view-pf-main-info {
    text-align: left;
    position: absolute;
    width: ~"calc(100% - 210px)";
    height: 50px;
    padding: 0;
    left: 25px;
    top: 8px;

    .list-view-pf-body {
      padding-left: 24px;
      position: relative;
      white-space: nowrap;

      & > div {
        padding-top: 4px;
        display: inline-block;
      }
    }

    [data-type-field="arrow-button"] {
      position: absolute;
      left: 3px;
    }

    [data-type-field="type"] {
      display: inline-block;
      padding-right: 30px;
    }
  }

  .collection-component {
    font-size: 11px;
    padding: 4px 30px 0;
    width: 180px;

    & > div {
      margin: 0 5px;
      display: inline-block;
    }

    span + div {
      margin-top: -4px;
    }
  }

  .constraint-component {
    margin-top: -8px;
    padding-top: 2px;
    height: 40px;
  }

  .list-view-pf-actions {
    text-align: right;
    position: absolute;
    padding: 7px;
    margin: 0;
    width: 160px;
    height: 50px;
    right: 15px;
    top: 8px;

    button.btn {
      box-shadow: none;
      background: none;
      font-size: 17px;
    }
  }

  .name-text {
    font-weight: bold;
    padding: 0 5px;
  }

  .name-input {
    margin-right: 5px;
  }

  .data-type-label {
    display: block;
    font-weight: initial;
    opacity: .75;
    padding-bottom: 3px;
    margin-top: -10px;
    font-weight: 600;
  }

  .data-type-label:before {
    content: "* ";
    color: #A93C3C;
  }

  [data-type-field="save-button"],
  [data-type-field="close-button"] {
    margin-top: 2px;
  }

  [data-type-field="save-button"] {
    .fa {
      color: #0088CE;
    }
  }

  ul.dropdown-menu {
    padding: 3px 0;
  }

  .dropdown-kebab-container {
    float: right;
    margin: 0;
    width: 20px;
  }

  .kie-data-type-list {
    display: inline;
    margin-right: 5px;
    font-size: 13px;
    color: #555;
    margin-left: 10px;

    .fa.fa-th-list {
      margin-right: 5px;
    }
  }

  button {
    outline: none;
  }
}

[data-i18n-prefix="DNDListComponentView."] {

  div[data-row-uuid] {

    border: 1px solid #e2e4e3;
    height: 71px;

    &:hover {
      background: #eff8ff;
    }

    &.read-only {
      cursor: not-allowed;
      pointer-events: none;
      filter: brightness(.98);
      opacity: .75;

      &.kie-dnd-hover {
        background-color: #FFF;
      }
    }

    &.focused-data-type {
      background: #eff8ff;
      height: 72px;

      .list-group-item {
        .constraint-component {
          padding-top: 5px;
          white-space: nowrap;
          overflow: hidden;
        }

        .collection-component {
          padding-top: 10px;
        }
      }
    }

    &.key-highlight {
      background: #E5EEF5;
    }
  }
}

@media (max-width: 1470px) {

  [data-i18n-prefix="DataTypeListItemView."] {
    .collection-component > div {
      margin: 0;
    }
  }

  [data-i18n-prefix="DNDListComponentView."] {
    div[data-row-uuid].focused-data-type {
      .list-group-item .constraint-component {
        [data-field="constraints-tooltip"] {
          display: none;
        }
      }

      .collection-component {
        padding: 4px 0 0;
        width: 70px;

        [data-i18n-key="List"] {
          display: none;
        }
      }
    }
  }

  [data-i18n-prefix="DataTypeConstraintView."] {
    [data-field="constraints-anchor-container"] {
      font-size: 10px;
    }
  }
}

@media (max-width: 1350px) {
  [data-i18n-prefix="DataTypeListItemView."] {
    .list-view-pf-main-info {
      .list-view-pf-body {
        .name-input {
          width: 110px;
        }

        .bootstrap-select {
          width: 130px;
        }
      }
    }
  }

  [data-i18n-prefix="DataTypeSearchBarView."] {
    .kie-data-type-search {
      width: 250px;
    }
  }
}

@media (max-width: 1200px) {
  [data-i18n-prefix="DataTypeListItemView."] {
    .list-view-pf-main-info {
      .list-view-pf-body {
        [data-field="constraints-anchor-text"] {
          display: none;
        }
      }
    }
  }

  [data-i18n-prefix="DataTypeListView."] {
    .data-type-button {
      .expand-collapse {
        display: none;
      }
    }
  }
}
